<template>
    <div id="app">
        <div class="liveInfo">
            <div class="relative">
<!--                <yn-living/>-->
                <span
                    v-if="isPlayUrl"
                    class="fullScreen"
                    :class="{'full':!isFullScreen}"
                    @click="fullScreen"
                ></span>
                <span class="network" v-if="network">网络连接失败，请检查网络设置</span>
            </div>
            <yn-review v-if="isFullScreen"/>
        </div>
        <div class="fixed" v-if="isFullScreen">
            <yn-notice/>
        </div>
        <layer :title="layerTitle" v-show="layerVisible" @close="layerVisible=false"/>
    </div>
</template>
<script>
import hub, {SERVICE_EXCEPTION, TIMEOUT, SCREEN_CHANGE} from "./script/hub";
import layer from "./components/layer";
import {mapState} from "vuex";



export default {
    components: {layer},
    data() {
        return {
            layerTitle: "网络连接失败，请检查网络设置",
            layerVisible: false,
            isFullScreen: true,
            network: false
        };
    },
    watch: {
        isFullScreen(val) {
            hub.emit(SCREEN_CHANGE, val);
        }
    },
    computed: {
        ...mapState(["playUrl"]),
        isPlayUrl() {
            return this.playUrl.indexOf("recordLiveOff.htm") == -1 && this.playUrl;
        }
    },
    mounted() {
        hub.on(SERVICE_EXCEPTION, () => {
            this.layerVisible = true;
            this.layerTitle = "服务器异常,请稍后再试";
        });
        hub.on(TIMEOUT, () => {
            this.layerVisible = true;
            this.layerTitle = "加载超时，请稍后再试";
        });
        var self = this;
        window.addEventListener("online", function () {
            self.network = false;
        });
        window.addEventListener("offline", function () {
            self.network = true;
        });
    },
    methods: {
        //点击全屏按钮
        fullScreen() {
            this.isFullScreen = !this.isFullScreen;
        }
    }
};
</script>